<template>
  <view class="flex-col justify-start page">
    <view v-if="isLoading" class="flex justify-center items-center mt-12">
      <text>加载中...</text>
    </view>
    <view v-else class="flex-col items-start" style="width: 100%;">
      <text class="title">{{ detail.title }}</text>
      <text class="content">{{ detail.content }}</text>
      <!-- 动态判断内容类型 -->
      <video v-if="detail.mainType === 'video'" class="media" :src="detail.imgUrls[0]" controls></video>
      <view v-else class="flex-row flex-wrap">
        <image
            v-for="(url, index) in detail.imgUrls" 
            :key="index" 
            class="media"
            :src="url" 
            @tap="previewImage(url)" /> <!-- 添加点击事件 -->
      </view>
      <text class="date">{{ detail.date }}</text>
      <text class="type">{{ detail.typeText }}</text>
    </view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      detail: {
        imgUrls: [], // 修改为数组，存储多个图片路径
        title: "",
        content: "",
        date: "",
        typeText: "",
        mainType: "",
      },
      isLoading: true,
    };
  },
  methods: {
    fetchDetail(id, mainType) {
      const url = "/article/get/";
      this.$request({
        url: url,
        method: "GET",
        data: {
          article_id: id,
        },
        success: (response) => {
          if (response.statusCode === 200) {
            const data = response.data;
            // 确保 files 数组存在且第一个元素有效
            const fileUrls = Array.isArray(data.file_urls) ? data.file_urls : [];
            console.log("文件路径:", fileUrls); // 调试日志
            this.detail = {
              imgUrls: fileUrls, // 确保图片路径有效
              title: data.title,
              content: data.content,
              date: new Date(data.create_date).toLocaleDateString(),
              typeText: mainType === "article" ? "文章" : "视频",
              mainType: mainType,
            };
          } else {
            console.error("获取详情失败");
          }
          this.isLoading = false;
        },
        fail: (error) => {
          console.error("请求失败", error);
          this.isLoading = false;
        },
      });
    },
    // 新增方法：图片预览
    previewImage(currentUrl) {
      wx.previewImage({
        current: currentUrl, // 当前显示图片的链接
        urls: this.detail.imgUrls, // 所有图片链接列表
      });
    },
  },
  onLoad(options) {
    const { id, mainType } = options;
    if (id && mainType) {
      console.log("接收到的参数:", { id, mainType }); // 调试日志
      this.fetchDetail(id, mainType);
    } else {
      console.error("缺少必要参数 id 或 mainType");
    }
  },
};
</script>

<style scoped lang="css">
.page {
  padding: 30rpx;
  background-color: #f5f5f5;
}

.media {
  /* width: 30%; */
  width: 200rpx;
  height: 200rpx;
  border-radius: 16rpx;
  margin: 5rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #000000;
  margin-bottom: 10rpx;
}

.content {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 10rpx;
}

.date {
  font-size: 24rpx;
  color: #999999;
  margin-bottom: 10rpx;
}

.type {
  font-size: 24rpx;
  color: #fdcaaa;
  padding: 4rpx 8rpx;
  background-color: #fdcaaa;
  color: #ffffff;
  border-radius: 8rpx;
}
</style>